import React from "react";
import "./ImgTextCourse.scss";
import { useEffect, useState } from "react";
import { get_imgtext_course } from "../../utils/api";
function ImgTextCourse() {
  const [imgTextData, setImgTextData] = useState();
  useEffect(() => {
    async function getImgTextCourse() {
      let data = await get_imgtext_course();
      // console.log("获取图文教程数据", data);
      setImgTextData(data);
    }
    getImgTextCourse();
  }, []);
  return (
    <div className="ImgTextCourse">
      <div className="top">
        <span>图文教程</span>
        <i>查看更多&gt;</i>
      </div>
      <div className="img_text_con">
        {imgTextData &&
          imgTextData.slice(0, 3).map((item) => (
            <div className="item" key={item.id}>
              <div className="left">
                <img src={"https://ss.lanqb.com/" + item.imgCover} alt="" />
              </div>
              <div className="right">
                <h4>{item.title}</h4>
                <p>老师：{item.user_profile.nickname}</p>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}
export default ImgTextCourse;
